<template>

  <div style="padding-left: 10px">

    <div class="mallCreate">
      <el-form>

        <el-form-item label="商品编号:">
          <el-input v-model="itemCode"></el-input>
        </el-form-item>

        <el-form-item label="店铺名称:">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.sellerName"
                       :value="item.sellerId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类目选择:">
          <el-select v-model="cateId" placeholder="请选择">
            <el-option v-for="item in cateList" :key="item.value" :label="item.cateName"
                       :value="item.cid"></el-option>
          </el-select>
          <el-select v-model="cid" placeholder="请选择">
            <el-option v-for="item in childCateList" :key="item.value" :label="item.cateName"
                       :value="item.cid"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品标题:">
          <el-input v-model="title"></el-input>
        </el-form-item>

        <el-form-item>
          商品价格: &nbsp;&nbsp;<el-input style="width: 100px" v-model="discount"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;市场原价:
          <el-input style="width: 100px" v-model="price"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;初始销量:
          <el-input style="width: 100px" v-model="fakeSales"></el-input>
          <!--<label>佣金:</label>-->
          <!--<el-input style="width: 100px" v-model="reward"></el-input>-->
        </el-form-item>

        <el-form-item label="重量:">
          <el-input style="padding-left: 30px" v-model="weight"></el-input>
          (若邮费计算方式不按称重计算可不填商品重量)
        </el-form-item>

        <el-form-item label="运费:">
          <el-select v-model="post" placeholder="请选择" style="padding-left: 30px">
            <el-option v-for="item in postData" :key="item.post" :label="item.name" :value="item.feeId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品顶部展示图:"><span>（五张图片，最多9张）</span>
          <br>
          <el-input type="textarea"
                    row="10"
                    v-model="images"
                    autocomplete="off"
                    style="width: 800px;"
                    class="textarea"
                    placeholder="多个链接切换行输入">
          </el-input>
        </el-form-item>
      </el-form>

      <div>

        <div style="background: #f9f9f9;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 0 10px">商品参数:</div>
          <br>
          <br>
          <div style="width: 600px">
            <div v-for="(item,index) in params" style="margin: 0 0 10px 0">
              <template>
                <el-input style="width: 100px" v-model="item.name"></el-input>
                <el-input style="width: 300px" v-model="item.value"></el-input>
                <el-button @click="removeParams(index)">删除</el-button>
              </template>
            </div>
            <br>
          </div>
          <el-button @click="addModel()" style="margin:0 0 10px 10px">自定义参数</el-button>
        </div>


        <div style="background: #f9f9f9;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 0 10px">商品SKU:</div>
          <br>
          <br>
          <div style="width: 600px;margin: 0 0 10px 0" v-for="(item,index) in skus">
            <template>
              <el-input style="width: 100px" v-model="item.name"></el-input>
              <el-input style="width: 300px" v-model="item.value"></el-input>
              <el-button @click="removeSku(index)">删除</el-button>
            </template>
          </div>
          <br>
          <el-button @click="addSku()" style="margin:0 0 10px 10px">添加属性</el-button>
        </div>

        <div style="background: #f9f9f9;width: 100%;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 20px 10px">（建议切图，每张图片尺寸宽度为750px，高度不超过2000px）</div>
          <br>
          <el-input type="textarea"
                    row="10"
                    v-model="details"
                    autocomplete="off"
                    class="textarea"
                    placeholder="多个链接切换行输入">
          </el-input>
        </div>
        <div style="background: #f9f9f9;width: 100%;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 20px 10px">广告图链接(2张)</div>
          <br>
          <el-input type="textarea"
                    row="10"
                    v-model="advertImg"
                    autocomplete="off"
                    class="textarea"
                    placeholder="多个链接切换行输入">
          </el-input>
        </div>

      </div>

      <el-button type="primary" style="margin: 50px 0 0 0" @click="goSendGoods">确认修改</el-button>
    </div>

  </div>

</template>

<script>
  import LazyImgUpload from "../../components/LazyImgUpload"
  import {ajax, sellers, modifyItem, postFeeModel, selItemById, selMainCate} from "../../data/service";

  export default {
    name: "mallCreate",
    data() {
      return {
        itemId:'',
        options: [],
        cateList: [],
        childCateList: [],
        postData: [],
        value: '',
        cateId: '',
        childCateId: '',
        cid: '',
        post: '',
        params: [],
        skus: [],
        details: '',
        itemCode: '',
        title: '',
        discount: '',
        price: '',
        fakeSales: '',
        reward:'',
        weight: '',
        images:'',
        skuJson: '',
        paramsJson: '',
        feeId: '',
        imgIndex: '',
        backImg:require('../../assets/scImg1.png'),
        imgNum:0,
        choseIndex:'',
        advertImg:'',//广告图
      }
    },
    mixins: [ajax],
    created() {
      this.getShops();
      this.getPostFeeModel();
      this.getList();
    },
    watch: {
      cateId(){
        this.childCateList = [];
        this.cateList.forEach(item => {
          if(item.cid === this.cateId){
            this.childCateList = item.children
          }
        })
      }
    },
    methods: {
      getList() {
        this.itemId = this.$route.params.itemId;
        this.doajax(selItemById, {itemId: this.itemId}, (resp) => {
          this.itemCode = resp.itemCode;
          this.value = resp.sellerId;
          this.cid = resp.cid;
          this.title = resp.title;
          this.discount = resp.discount;
          this.price = resp.price;
          this.fakeSales = resp.fakeSales;
          this.weight = resp.weight;
          this.post = resp.feeId;
          this.reward = resp.reward;
          this.params = JSON.parse(resp.params);
          this.skus =JSON.parse( resp.skus);
          this.childCateId = resp.cid;
          this.images =  resp.images.replace(/,/g,'\n');
          this.details = resp.details.replace(/,/g,'\n');
          this.advertImg = resp.advertImg.replace(/,/g,'\n');
          this.getMainCates();
        })
      },
      getShops() {
        this.doajax(sellers, {}, (resp) => {
          this.options = resp.data;
        })
      },
      getMainCates(){
        this.doajax(selMainCate, {}, resp => {
          this.cateList = resp.data;
          
          this.cateList.forEach(item => {
            item.children.forEach(childItem => {
              if(childItem.cid === this.cid){
                this.cateId = item.cid;
                this.childCateList = item.children;
                this.cid = childItem.cid
              }
            })
          })
        })
      },
      getPostFeeModel() {
        this.doajax(postFeeModel, {}, (resp) => {
          this.postData = resp.data;
        })
      },
      goSendGoods() {
        if (this.itemCode === '') {
          this.error("请输入商品编号");
          return
        }
        if (this.value === '') {
          this.error("请选择店铺");
          return
        }
        if (this.title === '') {
          this.error("请输入商品标题");
          return
        }
        if (this.discount === '') {
          this.error("请输入商品特价");
          return
        }
        if (this.price === '') {
          this.error("请输入商品原价");
          return
        }
        if (this.fakeSales === '') {
          this.error("请输入商品初始销量");
          return
        }
        if (this.post === '') {
          this.error("请运费模板");
          return
        }
        if(this.advertImg ===''){
          this.error("请上传广告图");
          return
        }

        if(this.images===undefined || this.images ===''){
          this.error("请至少添加一张主图");
          return;
        }
        if(this.childCateId === ''){
          this.error("请选择类目");
          return
        }
        let advert = this.advertImg.split("\n");
        if(advert.length<2){
          this.error("至少2张广告图");
          return
        }

        let str;
        if(this.details){
          str =  this.blankSplit(this.details);
        }
        let img = this.blankSplit(this.images);

        this.skuJson=( JSON.stringify(this.skus) );
        this.paramsJson=( JSON.stringify(this.params) );

        let adv = advert[0]+","+advert[1];
        this.doajax(modifyItem, {
          itemId:this.itemId,
          itemCode: this.itemCode,
          sellerId: this.value,
          cid: this.cid,
          title: this.title,
          discount: this.discount,
          price: this.price,
          fakeSales: this.fakeSales,
          reward:this.reward,
          images:img,
          weight: this.weight,
          skus:this.skuJson,
          params:this.paramsJson,
          feeId:this.post,
          details:str===undefined?"":str,
          advertImg:adv
        }, (resp) => {
          if (resp.success === true) {
            this.$router.push('/admin/mallList');
          }
        })
      },

      addModel() {
        let modelParam = {name: '', value: ''};
        this.params.push(modelParam);
      },
      removeParams(index) {
        this.params.splice(index, 1);
      },
      addSku() {
        let modelParam = {name: '', value: ''};
        this.skus.push(modelParam);
      },
      removeSku(index) {
        this.skus.splice(index, 1);
      },
      blankSplit(str){
        if(!str){
          return "";
        }
        let a = str.split(/[\s\n]/);
        let b = [];
        for(let i = 0;i<a.length;i++){
          a[i].trim();
          if(a[i]!==undefined && a[i]!==''){
             b.push(a[i]);
          }
        }
        return b.join(",");
      }
    },
    components: {
      LazyImgUpload
    }
  }
</script>

<style>
  .mallCreate .el-input {
    width: 500px;
  }

  .afterUpload > img {
    width: 80px !important;
    height: 80px !important;
  }

  .createImg > .afterUpload {
    padding-right: 0;
  }

  .createImgX {
    width: 30px;
    float: left;
  }

  .textarea{}
  .textarea textarea{
    width:1000px;
    height: 300px;
  }
</style>
